<template>
    <!-- 养殖作业编辑
        props: tableEdit_visible：显示隐藏  farmingIdList：养殖档案信息 farmingOperateList：养殖操作名称 supplySkuList：投入品信息
        emit: finish：关闭刷新 closeEditDialog：关闭弹窗 -->
  <div>
    <el-dialog :title="dialogtitle" :visible.sync="tableEdit_visible" width="740px" :before-close="tableClose">
      <el-form ref="editformRef" :model="editform" label-width="130px" :rules="formRules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作名称" prop="operateName">
              <el-select v-model="editform.operateName" placeholder="请选择操作名称" clearable
                @change="selectGetFarmingOperate">
                <el-option v-for="(item,index) in farmingOperateList" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作时间" prop="operateTime">
              <el-date-picker :picker-options="pickerOptions" v-model="editform.operateTime" type="datetime"
                format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投入品编号" prop="supplySkuNumber">
              <el-select v-model="editform.supplySkuNumber" placeholder="请选择投入品SKU编号" clearable
                @change="selectSupplySKU">
                <el-option v-for="item in supplySkuList" :key="item.skuNumber" :label="item.skuNumber"
                  :value="item.skuNumber">
                  <div style="display: flex; flex-direction: row;">
                    <span style="">{{ item.supplyName }}</span>
                    <span style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "供应商:"+item.supplier }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "规格:" +item.specification }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "剩余数量:" + item.surplusAmount }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "所属仓库:" + item.warehouseName }}</span>
                    <span
                      style="color: #8492a6; font-size: 13px; padding-left:7px;">{{ "SKU编号:"+item.skuNumber }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投入品数量" prop="supplyAmount">
              <el-input v-model="editform.supplyAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" label="投入品信息">
            <el-input v-model="supplyMsg" :disabled="true" type="textarea" autosize>
            </el-input>
          </el-col>
        </el-row>
        <!-- <el-form-item label="上传图片" prop="picture">
          <el-upload action="http://120.77.156.205:9610/file/upload" :on-exceed="handleExceed"
            :on-success="handleSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
            :file-list="fileList" list-type="picture-card" :limit="1">
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件，且不超过500kb，点击放大图片</div>
          </el-upload>
        </el-form-item> -->
        <el-row>
          <el-col :span="24">
            <el-form-item>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="18">
            <el-form-item>
              <el-button type="primary" @click="editformOnSubmit" v-auth="'breed_job_update'">修改</el-button>
              <el-button @click="closeform">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
    <!-- <el-dialog :visible.sync="picDialogVisible" title="放大图片">
      <img width="100%" :src="editform.picture" alt="">
    </el-dialog> -->
  </div>
</template>
<script>
  // 接口数据
  import {
    editOperation,
    //   getAllInfoById,
  } from "@/Api/productionmanage/Operations"
  export default {
    name: 'OperationTableEditForm',
    props: {
      tableEdit_visible: {
        type: Boolean,
        default: false
      },
      editform: {
        type: Object,
        default: () => {}
      },
      farmingIdList: {
        type: Array,
        default: () => []
      },
      farmingOperateList: {
        type: Array,
        default: () => []
      },
      supplySkuList: {
        type: Array,
        default: () => []
      },
    },
    data() {
      return {
        // 表单标题
        dialogtitle: "编辑养殖作业",
        // 表单规则
        formRules: {
          farmingId: [{
            required: true,
            message: '请输入'
          }],
          operateTime: [{
            required: true,
            message: '请输入'
          }],
          operateName: [{
            required: true,
            message: '请输入'
          }],
          supplySkuNumber: [{
            required: true,
            message: '请输入'
          }],
          supplyAmount: [{
            required: true,
            message: '请输入'
          }],
        },
        // 日期时间选择器快捷按钮
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        // 投入品修改是否成功
        supplyFlag: true,
        supplyMsg: "",
        // 上传图片
        // fileList: [],
        // picDialogVisible: false,
      }
    },
    methods: {
      showSupplySKUMsg(n) {
        console.log(1)
        let arr = this.supplySkuList;
        for (let i in this.supplySkuList) {
          if (arr[i].skuNumber == n) {
            this.supplyMsg = "投入品名称:" + arr[i].supplyName + " 供应商:" + arr[i].supplier + " 规格:" +
              arr[i].specification + " 剩余数量:" + arr[i].surplusAmount + " 所属仓库:" + arr[i].warehouseName + " 编号:" + arr[i]
              .id;
          }
        }
      },
      // 关闭编辑弹窗
      tableClose() {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.closeform();
          })
          .catch(_ => {});
      },
      // 编辑弹窗确定
      editformOnSubmit() {
        this.$refs["editformRef"].validate(async (valid) => {
          if (valid) {
            this.editform.specification = undefined;
            this.editform.supplier = undefined;
            this.editform.supplyName = undefined;
            this.editform.warehouseName = undefined;
            this.editform.operator = undefined;
            this.editform.baseId = undefined;
            this.editform.baseName = undefined;
            this.editform.skuNumber = undefined;
            console.log("editform:" ,this.editform);
            const {
              data: res
            } = await editOperation(this.editform)
            if (res.statusCode === 20000 && this.supplyFlag == true) {
              this.$emit("finish")
              this.closeform();
              return this.$message.success("编辑养殖作业成功");
            } else {
              console.log(res);
              return this.$message.error("编辑养殖作业失败");
            }
          } else {
            return this.$message.error("请输入完整信息");
          }
        });
      },
      // 养殖档案选择器
      selectGetFarmingId(vId) {
        this.editform.farmingId = vId;
      },
      // 养殖操作选择器
      selectGetFarmingOperate(vId) {
        this.editform.operateName = vId;
      },
      // 投入品SKU选择器
      selectSupplySKU(vId) {
        let arr = this.supplySkuList;
        for (let i in this.supplySkuList) {
          if (arr[i].skuNumber == vId) {
            this.editform.userSupplyId = arr[i].id;
            this.supplyMsg = "投入品名称:" + arr[i].supplyName + " 供应商:" + arr[i].supplier + " 规格:" + arr[i].specification +
              " 剩余数量:" +
              arr[i].surplusAmount + " 所属仓库:" + arr[i].warehouseName + " 编号:" + arr[i].id;
          }
        }
      },
      // 上传图片 函数和新增表单组件中的函数一样，将addform改成editform
      // 关闭编辑表单弹窗
      closeform() {
        this.fileList = [];
        this.$emit("closeEditDialog", false);
      },

    },
    watch: {
      tableEdit_visible() {
        this.showSupplySKUMsg(this.editform.supplySkuNumber);
      }
    },
  }

</script>
<style>

</style>
